<template>
  <div class="orders-container">
    <el-table :data="orders" border stripe>
      <el-table-column prop="order_id" label="订单号" width="120" />
      <el-table-column prop="room_name" label="会议室" width="180" />
      <el-table-column prop="customer_id" label="客户ID" width="100" />
      <el-table-column prop="start_time" label="开始时间" width="180">
        <template #default="{ row }">
          {{ new Date(row.start_time).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="end_time" label="结束时间" width="180">
        <template #default="{ row }">
          {{ new Date(row.end_time).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="total_price" label="总价(元)" width="120" />
      <el-table-column prop="order_status" label="订单状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getOrderStatusTag(row.order_status)">
            {{ getOrderStatusName(row.order_status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="refund_status" label="退款状态" width="120">
        <template #default="{ row }">
          <el-tag v-if="row.refund_status" :type="getRefundStatusTag(row.refund_status)">
            {{ getRefundStatusName(row.refund_status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button
            v-if="row.order_status === 'canceled' && row.refund_status === 'pending'"
            type="success"
            size="small"
            @click="handleRefund(row.order_id, 'approved')"
          >
            同意退款
          </el-button>
          <el-button
            v-if="row.order_status === 'canceled' && row.refund_status === 'pending'"
            type="danger"
            size="small"
            @click="handleRefund(row.order_id, 'rejected')"
          >
            拒绝退款
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getOrders, getOrderByRoomId,processRefund } from '@/api/orders'
import { ElMessage } from 'element-plus'

const route = useRoute()
const orders = ref([])

const orderStatusNames = {
  unpaid: '未支付',
  paid: '已支付',
  canceled: '已取消',
  used: '已完成'
}

const orderStatusTags = {
  unpaid: 'warning',
  paid: 'success',
  canceled: 'danger',
  used: 'info'
}

const refundStatusNames = {
  pending: '待处理',
  approved: '已同意',
  rejected: '已拒绝'
}

const refundStatusTags = {
  pending: 'info',
  approved: 'success',
  rejected: 'danger'
}

const getOrderStatusName = (status) => {
  return orderStatusNames[status] || status
}

const getOrderStatusTag = (status) => {
  return orderStatusTags[status] || ''
}

const getRefundStatusName = (status) => {
  return refundStatusNames[status] || status
}

const getRefundStatusTag = (status) => {
  return refundStatusTags[status] || ''
}

const fetchOrders = async () => {
  try {
    const params = {}
    if (route.query.room_id) {
      params.room_id = route.query.room_id
    }
    // const response = await getOrders(params)
    const response = await getOrderByRoomId(params)
    console.log(response)
    orders.value = response
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  fetchOrders()
})

const handleRefund = async (orderId, status) => {
  try {
    await processRefund(orderId, status)
    ElMessage.success('操作成功')
    fetchOrders()
  } catch (error) {
    console.error(error)
  }
}
</script>

<style scoped>
.orders-container {
  padding: 20px;
}
</style>